<div id="itemActionsBar">
  <% if (!redisReadOnly) { %>
  <button class="btn btn-danger" onclick="deleteKey('<%= connectionId %>','<%= key %>')">Delete Key</button>
  <% } %>
  <button id="base64Button" class="btn btn-primary" onclick="decodeKey('<%= connectionId %>','<%= key %>')">Decode <small>base64</small></button>
  <button id="viewModeStringButton" class="btn" style="display: none;" onclick="onModeStringButtonClick()">View mode edit</button>
  <button id="viewModeJsonButton" class="btn" onclick="onModeJsonButtonClick()">View mode tree</button>
  <button id="copyTextButton" class="btn">Copy Text</button>
</div>
<div id="itemData">
  <label>Key: <b><%= key %></b></label>
  <label>TTL: <b><%= ttl %></b></label>
  <label>Type: <b><%= type %></b></label>
  <form id="editStringForm" action="apiv1/key/<%= connectionId %>/<%= key %>" method="POST" class="form-vertical">
    <div id="jqtree_string_div" class="json-renderer" style="display: none;">loading ...</div>
    <span id="stringValueBox" class="text-renderer">
      <textarea id="stringValue" name="stringValue" style="width: 600px; height: 300px;"></textarea>
      <br>
      <label class="checkbox"><input type="checkbox" id="isJson" name="isJson">Validate as JSON</label>
    </span>
    <br>
    <% if (!redisReadOnly) { %>
    <button id="saveKeyButton" type="button" class="btn" onclick="$('#editStringForm').trigger('submit')">Save</button>
    <% } %>
  </form>
</div>
<script>
  uiConfig.clipboard = new ClipboardJS('#copyTextButton', {
    text: function(trigger) {
      if ($('#stringValueBox:visible').length === 0) {
        return document.getElementById('jqtree_string_div').textContent;
      }
      else {
        return document.getElementById('stringValue').value;
      }
    }
  });

  function onModeStringButtonClick() {
    dataUIFuncs.onModeStringButtonClick('#editStringForm')
  }

  function onModeJsonButtonClick() {
    dataUIFuncs.onModeJsonButtonClick('#editStringForm')
  }

  $('#isJson').on('change', function(element) {
      if (element.target.checked) addInputValidator('stringValue', 'json');
      else removeInputValidator('stringValue');
  });

  $('#stringValue').on('blur', function(event) {
    try {
      $('#jqtree_string_div').jsonViewer(losslessJSON.parse(event.target.value), {withQuotes: true, withLinks: false, bigNumbers: true});
    }
    catch(ex) {
      $('#jqtree_string_div').empty().text('Text is no valid JSON: ' + ex.message);
    }
  });
</script>
